Thực đơn
Vue.js Khái niệm cơ bảnMột ứng dụng Vue luôn được bắt đầu bằng cách khởi tạo một đối tượng Vue (Vue instance):
new Vue({ // Các property})
Một ứng dụng Vue bao gồm một đối tượng Vue gốc. Ứng dụng này cũng thường được sắp xếp thành một cây gồm các component lồng nhau và tái sử dụng được. Ví dụ, cây component của một ứng dụng todo có thể trông như thế này:
Root Instance|- TodoList |- TodoItem |- DeleteTodoButton |- EditTodoButton |- TodoListFooter |- ClearTodosButton |- TodoListStatistics
Khi một đối tượng Vue được khởi tạo, tất cả các thuộc tính trong object data
sẽ được thêm vào hệ thống phản ứng (reactivity system) của Vue. Điều này có nghĩa là view sẽ phản ứng khi giá trị của các thuộc tính này thay đổi, và tự cập nhật tương ứng với các giá trị mới.
// Chúng ta khởi tạo một object datavar data = { a: 1 }// Khởi tạo một đối tượng Vue và truyền object data vào property data của đối// tượng Vuevar vm = new Vue({ data: data})// vm.a và data.a cùng trỏ đến một đối tượng!vm.a === data.a // => true// Thay đổi thuộc tính của vm cũng sẽ ảnh hưởng đến dữ liệu ban đầuvm.a = 2data.a // => 2// ... và ngược lạidata.a = 3vm.a // => 3
Khi được khởi tạo, một đối tượng Vue sẽ đi qua nhiều bước khác nhau - cài đặt quan sát dữ liệu (data observation), biên dịch template, gắn kết vào DOM, cập nhật DOM khi dữ liệu thay đổi v.v. Trong suốt tiến trình này, nó cũng sẽ thực thi một số hàm gọi là lifecycle hook, giúp người dùng thêm code của mình vào các giai đoạn (stage) cụ thể trong vòng đời của đối tượng.
Ví dụ, hook created
có thể được dùng để thực thi code sau khi một đối tượng được khởi tạo:
new Vue({ data: { a: 1 }, created: function () { // `this` trỏ đến đối tượng Vue hiện hành console.log('giá trị của a là ' + this.a) }})// => "giá trị của a là 1"
Các hook khác như mounted
, updated
, và destroyed
cũng được gọi vào các giai đoạn khác nhau trong vòng đời của đối tượng. Tất cả các hook này đều được thực thi với ngữ cảnh this
trỏ đến đối tượng Vue hiện hành.
Thực đơn
Vue.js Khái niệm cơ bảnLiên quan
Vue.jsTài liệu tham khảo
WikiPedia: Vue.js http://element.eleme.io/#/en-US http://blog.evanyou.me/2014/02/11/first-week-of-la... http://vuecidity.wemakesites.net/ http://quasar-framework.org/ http://router.vuejs.org/en https://github.com/NguyenThanh1995/nguyenthanh1995... https://github.com/vuejs/core https://github.com/vuejs/vue-cli https://github.com/vuejs/vue/blob/dev/LICENSE https://github.com/vuejs/vue/releases